.navbar {
  padding-left: 0;
  padding-right: 0;
  height: 65px;

  &__inner {
    position: relative;
    max-width: $container-width;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

  &__item {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;

    @include mobile-screen {
      display: none;
    }

    svg {
      display: none;
    }
  }

  &-item-discord:before,
  &-item-github:before {
    display: flex;
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    margin-right: 0.5rem;
    content: "";
    justify-items: center;
    margin-right: 0.5rem;
    background-size: contain;
  }

  &-item-discord:before {
    width: 27px;
    height: 20px;
  }

  &-item-github:before {
    width: 20px;
    height: 20px;

    @include mobile-screen {
      width: 27px;
      height: 27px;
    }
  }

  &-sidebar {
    &__brand {
      box-shadow: none;
    }

    &__back {
      display: none;
    }
  }
}

html[data-theme="dark"] {
  .navbar {
    background-color: $color-gray-1;
    border-bottom: 1px solid $color-gray-3;

    &-item-github:before {
      // background-image: url('/img/github-white.svg');
    }

    &-item-discord:before {
      // background-image: url('/img/discord-white.svg');
    }

    &-sidebar {
      background-color: $color-gray-1;

      &__brand {
        border-bottom: 1px solid $color-gray-3;
      }
    }
  }
}

html[data-theme="light"] {
  .navbar {
    border-bottom: 1px solid $color-gray-10;
    box-shadow: none;

    &-item-github:before {
      // background-image: url('/img/github-black.svg');
    }

    &-item-discord:before {
      // background-image: url('/img/discord-black.svg');
    }

    &-sidebar {
      &__brand {
        border-bottom: 1px solid $color-gray-10;
      }
    }
  }
}
